<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/angular.min.js"></script>
		<script src="js/angular-route1.4.5.js"></script>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
			font-family: "微软雅黑";
			font-size: 62.5%;
		}
		html,body{
			width:100%;
			height:100%;
			overflow: hidden;
			position: relative;
			
		}
		footer{
			position: absolute;
			bottom:0;
			width:100%;
			display: flex;
			justify-content: space-around;
			align-items:center;
			text-align: center;
		}
		footer a{
			text-decoration: none;
		    flex-grow: 1;
			background: pink;
			border-right:1px solid #fff;
			font-size: 2rem;
		}
		footer a.active{
			background:orange;
			color:#fff;
		}
	</style>
	<body  ng-controller="ctr">
		<ng-view></ng-view>
		
		
		<footer>
		<a href="#shouye" ng-class="{active:type==1}" ng-click="toggle(1)">首页</a>
	    <a href="#shanpin" ng-class="{active:type==2}" ng-click="toggle(2)">娱乐</a>
	    <a href="#gouwuche" ng-class="{active:type==3}" ng-click="toggle(3)">购物车</a>
		</footer>
	</body>
	<script>
		var add=angular.module("app",["ngRoute"]);
		add.config(["$routeProvider",function($routeProvider){
			$routeProvider
			.when("/shouye",{
				templateUrl:"shouye.html"
			})
			.when("/shanpin",{
				templateUrl:"shanpin.html"
			})
			.when("/gouwuche",{
				templateUrl:"gouwuche.html"
			})
			.otherwise({
			redirectTo:"/shouye"
			})
		}])
		add.controller("ctr",function($scope){
			$scope.type=1;
			$scope.toggle=function(type){
				$scope.type=type
			}
		})
	</script>
</html>
